<template>
  <div class="top">
    <div class="header">
      <div class="htitle">数字孪生石门水库</div>
      <Timer />
      <div class="wetherlist">
        <div
          v-for="(item, index) in data.wethericon"
          :key="index"
          class="wetheritem"
        >
          <!-- <i :class="['wi-day-sunny', 'iconimg']" /> -->
          <img v-if="index == 0" :src="item.code" alt="" class="wetherimg" />
          <span class="wethertext">{{ item.val }}</span>
        </div>
      </div>
      <!-- <img
        @click="close"
        src="@/assets/image/close.png"
        alt=""
        class="closebutton"
      /> -->
    </div>
  </div>
</template>

<script setup>
import { getnowweather } from "../../api/index";
import axios from "axios";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import Timer from "./time.vue";
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onBeforeMount,
  computed,
  watch,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
let icon = ref("");
let interval = ref(null);
let data = reactive({
  weatherdata: null,
  source: null,
  wethericon: [
    {
      icon: require("@/assets/image/wjt.png"),
      val: "25℃",
      code: require("@/assets/image/wjt.png"),
    },
    {
      icon: require("@/assets/image/wsd.png"),
      val: "风速:5m/s",
    },
    {
      icon: require("@/assets/image/wsd.png"),
      val: "湿度:45%RH",
    },
    {
      icon: require("@/assets/image/wjy.png"),
      val: "降雨:1.3mm",
    },
  ],
});

data.weatherdata = computed(() => store.state.weatherdata);

watch(
  () => data.weatherdata,
  (newval, old) => {
    if (data.weatherdata) {
      data.wethericon[0].code = require(`@/assets/image/${data.weatherdata.result.realtime.text}.png`);
      data.wethericon[0].val = data.weatherdata.result.realtime.temp + "℃";
      data.wethericon[1].val =
        "风速:" + data.weatherdata.result.realtime.windSpeed + "m/s";
      data.wethericon[2].val =
        "湿度:" + data.weatherdata.result.realtime.rh + "%RH";
      data.wethericon[3].val =
        "降雨:" + data.weatherdata.result.realtime.prec + "mm";
    }
  },
  { deep: true }
);
onMounted(() => {});
onUnmounted(() => {});
// getweather();
function getweather() {
  getnowweather().then((res) => {
    // console.log(res.result.realtime);
    data.wethericon[0].code = require(`@/assets/image/${res.result.realtime.text}.png`);
    data.wethericon[0].val = res.result.realtime.temp + "℃";
    data.wethericon[1].val = "风速:" + res.result.realtime.windSpeed + "m/s";
    data.wethericon[2].val = "湿度:" + res.result.realtime.rh + "%RH";
    data.wethericon[3].val = "降雨:" + res.result.realtime.prec + "mm";
  });
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 120px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url("@/assets/image/topback.png") 0px 0px no-repeat;
  background-size: cover;
  .header {
    width: 100%;
    height: 86px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: url("@/assets/image/header.png") 0px 0px no-repeat;
    background-size: cover;
    z-index: 3;
    .htitle {
      text-align: center;
      font-family: "HuXiaoBo-NanShen";
      font-weight: 500;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 4px;
      font-style: normal;
      text-transform: none;
      margin-top: 16px;
    }
    .zdsz {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 67px;
      left: 422px;
      z-index: 1;
      cursor: pointer;
    }
    .wetherlist {
      position: absolute;
      right: 52px;
      top: 56px;
      display: flex;
      align-items: center;
      gap: 20px;
      .wetheritem {
        display: flex;
        align-items: center;
        gap: 9px;
        .wethertext {
          font-family: "HuXiaoBo-NanShen";
          font-weight: normal;
          font-size: 14px;
          color: #ffffff;
          // line-height: 92px;
          // text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .wetherimg {
          width: 30px;
          height: 30px;
        }
        .iconimg {
          font-size: 28px;
          color: #ef6141;
        }
      }
    }
    .closebutton {
      position: absolute;
      top: 32px;
      right: 52px;
      cursor: pointer;
    }
  }
}
</style>